<div>
    <el-dialog :close-on-click-modal="false"  :close-on-press-escape="false"  class="dialogStyleBase" :title="'选择'+textTitle" width="500px" :visible.sync="boxVisible" append-to-body
        :before-close="editBoxCancel">
        <div class="main">
            <div class="input">
                <el-input v-model="specsBaseValue" @input="specsBaseInput" :placeholder="'请搜索或选择下列'+textTitle">
                </el-input>
                <el-button style="margin-left:10px" v-if="specsBaseValue" type="primary" @click="addSpecBase()">
                    创建{{textTitle}}
                </el-button>
            </div>
            <!-- 如果 value 为空 不已存在列表-->
            <div class="tagList" v-if="!specsBaseValue">
                <el-tag class="tagStyle pointer" v-for="(item,index) in list"  :key="index" closable @close="delSpecBase(item,index)" @click="selectSpecBase(item,index)">{{item.label}}</el-tag>
            </div>

            <!-- 如果 value 不为空 显示搜索结果 -->
            <div class="tagList" v-if="specsBaseValue">
                <el-tag class="tagStyle " v-for="(item,index) in listFilter" :key="index" closable @close="delSpecBase(item,index)" @click="selectSpecBase(item,index)">{{item.label}}</el-tag>
            </div>
            <div class="kong" v-if="specsBaseValue && listFilter.length<=0">
                <div class="k1">
                    未搜索到结果，您可创建<span>『 {{specsBaseValue}} 』</span>{{textTitle}}到列表
                </div>
                <el-button @click="addSpecBase()">确定创建</el-button>
            </div>

            <div class="kong" v-if="!specsBaseValue && list.length<=0">
                <div class="k1">
                    没有可用{{textTitle}}<br>您可在上方输入框内输入{{textTitle}}名称并创建
                </div>
            </div>


        </div>

    </el-dialog>




    <el-dialog :close-on-click-modal="false"  :close-on-press-escape="false"  class="dialogStyleBase" title="新增属性" width="500px" :visible.sync="boxCreateVisible" append-to-body
        :before-close="hideCreateBox">
        <div class="main" style="padding:20px">
            <el-form label-width="100px" label-position="left">
                <el-form-item label="属性名称" >
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="属性值" >
                    <el-input style="width:70%" v-model="addForm.attrSub" ></el-input>
                    <el-button style="margin-left:10px" @click="addAttrSub()">确定</el-button>
                </el-form-item>
            </el-form>
            
            <el-tag class="tagStyle"  v-for="(item,index) in addForm.values" :key="index" :disable-transitions="true" @close="delAttrSub(item,index)" closable >{{item.value}}</el-tag>
          

            
            
        </div>

        <div slot="footer">
            <el-row>
                <el-col :span="12" style="text-align: left;">
                    <el-button size="mini" @click="hideCreateBox()">取消</el-button>
                </el-col>
                <el-col :span="12">
                    <el-button type="primary" size="mini" @click="submitCreateBox()">确定</el-button>
                </el-col>
            </el-row>
        </div>

    </el-dialog>
</div>